<template>
  <div id="app">
    <template>
      <div>
        <h1>{{ $route.name }}</h1>
        <ul class="nav">
          <li class="nav-li">
            <router-link to="/home">首页</router-link>
          </li>
          <li class="nav-li">
            <router-link to="/about">关于我们</router-link>
          </li>
        </ul>
        <div class="main">
          <router-view></router-view>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {},
  data(){
    return {
      globalName:'VUE-APP'
    }
  },
  provide(){
    return {
      getName: this.globalName
    }
  },
  methods:{

  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.main{
  margin: 45px auto;
  width: 1000px;
  height: 600px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.nav{
  display: flex;
}
.nav-li{
  width: 80px;
}
</style>
